<template>
	<view class="order">
		<text class="order-title">购课信息</text>
		<view class="order-card">
			<view class="card-info">
				<view class="card-info-left">
					<view class="card-info-title">
						<text class="card-info-h1">溶化焊接预热切割作业</text>
						<text class="tag">初训</text>
					</view>
					<view class="card-info-txt">
						<view class="iconfont icon-weikaishi1">
						</view>
						<text>上课时间：48课时 09:00-18:00</text>
					</view>
					<view class="card-info-txt">
						<view class="iconfont icon-dingwei">
						</view>
						<text>中山市企安校区</text>
					</view>
				</view>
				<text class="price">¥2000</text>
			</view>
			<view class="card-info">
				<view class="card-info-left">
					<view class="card-info-title">
						<text class="card-info-h1">溶化焊接预热切割作业</text>
						<text class="tag">初训</text>
					</view>
					<view class="card-info-txt">
						<view class="iconfont icon-weikaishi1">
						</view>
						<text>上课时间：48课时 09:00-18:00</text>
					</view>
					<view class="card-info-txt">
						<view class="iconfont icon-dingwei">
						</view>
						<text>{{ config.name }}</text>
					</view>
				</view>
				<text class="price">¥2000</text>
			</view>
			<view class="sale">
				<text>优惠信息</text>
				<view class="sale-txt">
					优惠:<text>￥-200</text>
				</view>
			</view>
			<view class="total">
				<text style="margin-right: 8rpx;">共计2门课程，小计</text>
				<text style="font-size: 28rpx;color: #2A2C31;font-weight: 700;">¥</text>
				<text class="num">4000</text>
			</view>
		</view>
		<view class="pay-type order-card">
			<text class="title">支付方式</text>
			<view class="wechat">
				<view class="iconfont icon-weixinzhifu">
				</view>
				<text>微信支付</text>
			</view>
		</view>
		<view class="order-bottom">
			<text class="btm-total">共计2门课程</text>
			<view class="right">
				<view class="price">
					<view class="price-top">
						<text>总计：</text>
						<text class="icon">¥</text>
						<text class="rmb">4000</text>
					</view>
					<text class="price-btm">共减:¥200</text>
				</view>
				<view @click="pay" class="btn-pay">
					立即支付
				</view>
			</view>

		</view>
	</view>
</template>

<script>
import {
	placeOrder,
	payOrderWithWXPay
} from '@/http/exam.js'
export default {
	data() {
		return {
			courseId: '',
			data: []
		}
	},
	onLoad(options) {
		this.courseId = options.id
		this.config = uni.getStorageSync('config')[0] || {}
		this.loadData()
	},
	methods: {
		loadData() {
			// placeOrder({
			// 	courseId: this.courseId
			// }).then(res => {
			// 	this.data = res.data
			// })
		},
		generateNonceStr() {
			const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
			let nonceStr = '';
			for (let i = 0; i < 32; i++) {
				nonceStr += chars.charAt(Math.floor(Math.random() * chars.length));
			}
			return nonceStr;
		},
		pay() {
			uni.showLoading({
				title: '购买中...',
				mask: true
			})
			placeOrder({
				courseId: this.courseId
			}).then(res => {
				this.data = res.data
				console.log(this.data);
				payOrderWithWXPay({
					orderId: this.data.orderId,
					courseId: this.courseId,
					openId: 'oQDh-7YGdtVv9GFKqR5sNYGAhvRY'
				}).then(res => {
					// return
					let payData = {
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.packageValue,
						signType: res.data.signType,
						paySign: res.data.paySign,
						appId: res.data.appId,
						// orderId: this.data.orderId
					}
					uni.requestPayment({
						provider: 'wxpay',
						...payData,
						success: (res) => {
							uni.hideLoading()
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/courses/courses'
								})
							}, 1500)
						},
						fail: (err) => {
							uni.hideLoading()
							uni.showToast({
								title: '支付失败',
								icon: 'error'
							})
						}
					})
				})
			})

		}
	}
}
</script>

<style lang="scss">
.order {
	background: linear-gradient(180deg, #fc3826FF, #f49d95FF);
	background-size: 100% 450rpx;
	background-repeat: no-repeat;
	background-color: #F7F6F9;
}

.order {
	padding-top: 50rpx;
}

.order-title {
	font-weight: 400;
	font-size: 36rpx;
	color: #FFFFFF;
	display: block;
	margin-bottom: 20rpx;
	margin-left: 35rpx;
}

.order-card {
	background: #FFFFFF;
	box-shadow: 0rpx 9rpx 16rpx 0rpx rgba(137, 135, 142, 0.09);
	border-radius: 10rpx;
	margin: 35rpx;
}

.card-info {
	padding: 30rpx;
	display: flex;
	border-bottom: 4rpx solid #F2F2F2FF;

	.card-info-left {
		flex: 1;

		.card-info-title {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.card-info-h1 {
				font-weight: 700;
				font-size: 32rpx;
				color: #12141A;
			}

			.tag {
				margin-left: 25rpx;
				padding: 0 25rpx;
				height: 40rpx;
				line-height: 40rpx;
				background: #FDF7F2;
				border-radius: 4rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #F47900;
			}
		}

		.card-info-txt {
			font-weight: 400;
			font-size: 26rpx;
			color: #525355;
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;

			.iconfont {
				margin-right: 5rpx;
				color: #8e929b;
				font-size: 34rpx;
			}
		}
	}

	.price {
		font-weight: 500;
		font-size: 36rpx;
		color: #12141A;
	}
}

.sale {
	padding: 30rpx 35rpx;
	font-weight: 500;
	font-size: 26rpx;
	color: #525355;
	display: flex;
	justify-content: space-between;

	.sale-txt {
		text {
			font-weight: 700;
			font-size: 30rpx;
			color: #FD3523;
		}
	}
}

.total {
	padding: 0 35rpx 40rpx 35rpx;
	font-weight: 500;
	font-size: 26rpx;
	color: #525355;
	display: flex;
	align-items: baseline;
	justify-content: flex-end;

	.num {
		font-weight: 700;
		font-size: 46rpx;
		color: #2A2C31;
	}
}

.pay-type {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 35rpx;

	.title {
		font-weight: 700;
		font-size: 32rpx;
		color: #12141A;
	}

	.wechat {
		display: flex;
		align-items: center;
		font-size: 32rpx;

		.iconfont {
			font-size: 56rpx;
			color: #1cab43;
			margin-right: 10rpx;
		}
	}
}

.order-bottom {
	position: fixed;
	bottom: 0;
	width: 100%;
	background: #fff;
	display: flex;
	justify-content: space-between;
	padding: 15rpx 0;
	align-items: baseline;

	.btm-total {
		font-weight: 500;
		font-size: 26rpx;
		color: #AFAFAF;
		margin-left: 30rpx;
	}

	.right {
		display: flex;
		margin-right: 30rpx;

		.price {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
		}

		.price-top {
			text {
				font-size: 26rpx;
				color: #525355;
			}

			.icon {
				font-weight: 700;
				font-size: 28rpx;
				color: #FD3523;
			}

			.rmb {
				font-size: 46rpx;
				color: #FD3523;
				font-weight: 700;
			}
		}

		.price-btm {
			font-size: 24rpx;
			color: #FD3523;
		}

		.btn-pay {
			margin-left: 40rpx;
			width: 260rpx;
			height: 85rpx;
			line-height: 85rpx;
			text-align: center;
			background: #FD3523;
			border-radius: 10rpx;
			font-weight: 700;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}
}
</style>